<script>
import sheep from '@/sheep';

export default {
  name: "MarkLists",
  computed: {
    IMG_URL() {
      return sheep.$store('AI').sq_image_path
    }
  },
  props:{
    title:{
      type:String,
      default:''
    },
    is_color:{
      type:Boolean,
      default:false
    }
  }
}
</script>

<template>
  <view class="timeListDetail_content_left">
    <image class="timeListDetail_content_left_image" :src="`${IMG_URL}/chineseSurname/timeListDetail.png`"></image>
    <view class="timeListDetail_content_left_tips flex flex-row align-center justify-center"
          :style="{
            background: is_color ? '#FF4208' : '#FAD582',
          }"
    >
      <text class="timeListDetail_content_left_tips_text">{{title}}</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.timeListDetail_content_left {
  position: relative;

  .timeListDetail_content_left_image {
    width: 65rpx;
    height: 65rpx;
  }

  .timeListDetail_content_left_tips {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    width: 42rpx;
    height: 42rpx;
    background: #FF4208;
    border-radius: 50%;

    .timeListDetail_content_left_tips_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFF8EB;
    }
  }
}
</style>